<div class="pl20 pr20 pb20">
    <div class="jqx_group">
        <div class="">
            <span class="pl0 pr0 pt0 pb0 ml0 mr0 mt0 mb0">Tùy Chỉnh Báo Cáo</span>
        </div>
        <div>
            <div style="padding: 4px">
                <table>
                    <tr>
                        <td>
                            <div style='margin-top: 0px;' id='jqxComboBoxReport'></div>
                        </td>
                        <td>
                            <div style='margin-top: 0px;' id='jqxComboBoxReportType'></div>
                        </td>
                        <td>
                            <div id='jqxRadioButton-tong-hop' style='margin: 10px 0 0 10px; float: left;'>
                                Tổng hợp
                            </div>
                        </td>
                        <td>
                            <div id='jqxRadioButton-chi-tiet' style='margin: 10px 0 0 10px; float: left;'>
                                Chi tiết
                            </div>
                        </td>
                        <td style="width: 100px">
                            <input type="button" class="classic-btn" value="Xem"/>
                        </td>
                    </tr>
                </table>


            </div>
        </div>
    </div>
    <div style="height: 12px"></div>
    <div class="jqx_group">
        <div class="">
            <span class="pl0 pr0 pt0 pb0 ml0 mr0 mt0 mb0">Dữ Liệu Thống Kê</span>
        </div>
        <div>
            <div style="padding: 4px">
                <div style="min-height: 480px"></div>

            </div>
        </div>
    </div>
</div>
<script>
    $(document).ready(function () {
        var theme='classic';
        var monttype=[
            { value:"lastmonth",display:"Tháng Này" },
            { value:"prevmonth",display:"Tháng Trước" },
            { value:"1",display:"Tháng Một" },
            { value:"2",display:"Tháng Hai" },
            { value:"3",display:"Tháng Ba" },
            { value:"4",display:"Tháng Tư" },
            { value:"5",display:"Tháng Năm" },
            { value:"6",display:"Tháng Sáu" },
            { value:"7",display:"Tháng Bảy" },
            { value:"8",display:"Tháng Tám" },
            { value:"9",display:"Tháng Chín" },
            { value:"10",display:"Tháng Mười" },
            { value:"11",display:"Tháng Mười Một" },
            { value:"12",display:"Tháng Mười Hai" }
        ];
        var quatertype=[
            { value:"1",display:"Quí I" },
            { value:"2",display:"Quí II" },
            { value:"3",display:"Quí III" },
            { value:"4",display:"Quí VI" }
        ];
        var yeartype=[
            { value:"2012",display:"2012" },
            { value:"2013",display:"2013" },
            { value:"2014",display:"2014" },
            { value:"2015",display:"2015" }
        ];
        var source = [
            { value:"month",display:"Báo Cáo Doanh Thu Theo Tháng" },
            { value:"quater",display:"Báo Cáo Doanh Thu Theo Quí" },
            { value:"year",display:"Báo Cáo Doanh Thu Theo Năm" }
        ];
        $("#jqxRadioButton-tong-hop").jqxRadioButton({ width: 100, height: 25, checked: true, theme: theme });
        $("#jqxRadioButton-chi-tiet").jqxRadioButton({ width: 100, height: 25, checked: false, theme: theme });
        $(".jqx_group").jqxExpander({ showArrow: false, toggleMode: 'none', theme: theme });
        $("#jqxComboBoxReport").jqxComboBox({ source: source, selectedIndex: 0, width: '320px', 
            height: '25px', theme: theme ,displayMember: 'display',valueMember: 'value'});
        $("#jqxComboBoxReportType").jqxComboBox({ source: monttype, selectedIndex: 0, 
            width: '200px', height: '25px', theme: theme ,displayMember: 'display',valueMember: 'value'});
        $('#jqxComboBoxReport').bind('select', function (event) {
            var args = event.args;
            var item = $('#jqxComboBoxReport').jqxComboBox('getItem', args.index);
            if (item != null) {
                if(item.value=="month"){
                    $("#jqxComboBoxReportType").jqxComboBox({source: monttype, selectedIndex: 0});
                }else if(item.value=="quater"){
                    $("#jqxComboBoxReportType").jqxComboBox({source: quatertype, selectedIndex: 0});
                }else if(item.value=="year"){
                    $("#jqxComboBoxReportType").jqxComboBox({source: yeartype, selectedIndex: 0});
                }
            }
        });
    });
</script>